<template>
  <div
    :class="[
      { 'home-showslide': isShowMinimenu },
      { 'home-unshowslide': unShowMinimenu },
    ]"
  >
    <div class="home-bar">
      <ul style="flex: 1">
        <li @click="barClick(1)">Wmmint</li>
        <li @click="barClick(1)">首页</li>
        <li @click="barClick(2)">留言板</li>
        <li @click="barClick(3)">关于我</li>
      </ul>
      <div>
        <el-button @click="searchClick">搜索</el-button>
      </div>
    </div>
    <div
      @click="minibarClick"
      :class="[
        'home-minibar',
        { 'home-minibar-animation': !isShowIcon },
        { 'home-minibar-animation-false': isShowIcon },
      ]"
    >
      MENU
    </div>
    <header
      @touchmove="rightClick"
      @click="rightClick"
      :class="[
        'home-header',
        { 'home-header-back1': barIndex == 1 },
        { 'home-header-back2': barIndex == 2 },
        { 'home-header-back3': barIndex == 3 },
      ]"
    >
      <div class="home-hearder-content">
        <template v-if="barIndex == 1">
          <div>Welcome To My Blog</div>
          <div>Wmmint</div>
        </template>
        <template v-else-if="barIndex == 2">
          <div>留言板</div>
          <div style="font-size: 20px; font-weight: normal">2021年10月8日</div>
        </template>
        <template v-else-if="barIndex == 3">
          <div class="home-img">
            <img src="http://r0isfzwov.hn-bkt.clouddn.com/ic_me.jpg" alt="" />
            <!-- <img src="../../assets/images/blog/ic_me.jpg" alt="" /> -->
            <div>Wmmint</div>
          </div>
        </template>
      </div>
    </header>
    <div @touchmove="rightClick" @click="rightClick">
      <router-view></router-view>
    </div>

    <div :class="['home-minimenu']">
      <div class="home-img">
        <img
          style="height: 90px; width: 90px; margin: 40px 0"
          src="http://r0isfzwov.hn-bkt.clouddn.com/ic_me.jpg"
          alt=""
        />
      </div>
      <div class="home-leftbar">
        <div @click="barClick(1)">Wmmint</div>
        <div @click="barClick(1)">首页</div>
        <div @click="barClick(2)">留言板</div>
        <div @click="barClick(3)">关于我</div>
      </div>
    </div>
    <!-- <header v-if="barIndex==1" class="home-header">
      <div class="home-hearder-content">
        <div>Welcome To My Blog</div>
        <div>Wmmint</div>
      </div>
    </header> -->
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  data() {
    return {
      barIndex: 1,
      isShowIcon: true,
      isShowMinimenu: false,
      unShowMinimenu: false,
    };
  },

  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
    api.jumpPage("Index");
  },

  //登录时候按enter键进入
  created() {},

  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollToTop);
  },

  methods: {
    rightClick() {
      console.log("down");
      if (this.isShowMinimenu) {
        this.isShowMinimenu = false;
        this.unShowMinimenu = true;
      }
    },

    minibarClick() {
      this.isShowMinimenu = !this.isShowMinimenu;
      this.unShowMinimenu = !this.isShowMinimenu;
      console.log(this.isShowMinimenu);
    },

    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop < 200) {
        this.isShowIcon = true;
      } else {
        this.isShowIcon = false;
      }
    },

    searchClick() {
      api.toast("嘿嘿 还在开发中 期待一下吧");
    },

    barClick(index) {
      if (this.isShowMinimenu) {
        this.isShowMinimenu = false;
        this.unShowMinimenu = true;
      }
      this.barIndex = index;
      //   首页
      if (index == 1) {
        api.jumpPage("Index");
      } else if (index == 2) {
        api.jumpPage("LeaveMsg");
      } else if (index == 3) {
        api.jumpPage("AboutMe");
      }
    },
  },
};
</script>

<style scoped>
.home-minimenu {
  position: fixed;
  top: 0;
  left: -200px;
  background-color: #fff;
  height: 100%;
  width: 200px;
  /* transform: translateX(-100%); */
  z-index: 98;
}

.home-minimenu-ani {
  animation-name: minimenushow;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.home-minimenu-reani {
  animation-name: minimenushowre;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.home-showslide {
  animation-name: divslide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.home-unshowslide {
  animation-name: redivslide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes divslide {
  from {
  }
  to {
    transform: translateX(200px);
  }
}

@keyframes redivslide {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes minimenushowre {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes minimenushow {
  from {
  }
  to {
    transform: translateX(100%);
  }
}

.home-img img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
  transition: all 1s linear;
}

.home-img img:hover {
  /* animation-name: imgrotate;
  animation-direction: normal;
  animation-duration: 1s;
  animation-fill-mode: forwards; */
  transform: rotate(-45deg);
  transition: all 1s linear;
}

@keyframes imgrotate {
  from {
  }
  to {
    transform: rotate(-45deg);
  }
}

.home-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: normal;
  cursor: pointer;
}

.home-article-box {
  max-width: 808px;
  margin: 60px auto;
  padding-bottom: 100px;
}

.home-hearder-content {
  height: 100%;
  width: 100%;
  color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 900;
}

.home-article-box article {
  background-image: url("http://r0isfzwov.hn-bkt.clouddn.com/bg-2.png");
  background-size: cover;
  padding: 70px 20px;
  margin-top: 50px;
  border-radius: 10px;
  opacity: 0.9;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}

.home-article-box article div:first-child {
  font-size: 30px;
  padding-bottom: 20px;
}

.home-header {
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-header-back1 {
  background-image: url("http://r0isfzwov.hn-bkt.clouddn.com/bg-1.jpg");
}

.home-header-back2 {
  background-color: #91aca5;
}

.home-header-back3 {
  background-color:#91aca5;
}

.home-bar {
  color: aliceblue;
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 99;
}

.home-bar ul {
  display: flex;
  align-items: center;
}

.home-bar ul li {
  padding: 0 20px;
  cursor: pointer;
}

.home-bar ul li:hover {
  color: #ccc;
  font-weight: bold;
}

.home-bar ul li:first-child {
  font-weight: bold;
  font-size: 30px;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

@media screen and (max-width: 750px) {
  .home-bar {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .home-minibar {
    display: none;
  }
}

.home-minibar {
  background-color: #fff;
  border-radius: 20px;
  padding: 8px 20px;
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 99;
  border: 1px #000 solid;
}

.home-minibar-animation {
  animation-name: minibarout;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.home-minibar-animation-false {
  animation-name: minibaroutre;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes minibarout {
  from {
    position: fixed;
    top: 10px;
    left: 10px;
  }
  to {
    /* transform: translateX(-100px); */
    position: fixed;
    top: 10px;
    left: -100px;
  }
}

@keyframes minibaroutre {
  from {
    /* transform: translateX(-100px); */
    position: fixed;
    top: 10px;
    left: -100px;
  }
  to {
    position: fixed;
    top: 10px;
    left: 10px;
  }
}

.home-leftbar div {
  text-align: center;
  padding: 10px 0;
  border-bottom: solid 1px #ccc;
  color: #38393b;
}

.home-leftbar div:first-child {
  border-top: solid 1px #ccc;
  font-weight: bold;
}
</style>